<template>
  <page-header-wrapper>
    <el-card>
      <div class="table-page-search-wrapper">
        <el-form :inline="true" class="table-head-ground">
          <div class="table-layer">
            <el-form-item label="" class="table-head-layout" style="max-width:350px;min-width:300px">
              <el-date-picker
                v-model="searchData.timeRange"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd HH:mm:ss"
                :disabled-date="disabledDate"
              >
              </el-date-picker>
            </el-form-item>
            <el-input
              v-model="searchData.unionOrderId"
              placeholder="渠道订单号"
              style="width: 300px; margin-right: 10px;"
            />
            <el-input
              v-model="searchData.mchNo"
              placeholder="商户号"
              style="width: 300px; margin-right: 10px;"
            />
            <el-input
              v-model="searchData.isvNo"
              placeholder="服务商号"
              style="width: 300px; margin-right: 10px;"
            />
            <el-input
              v-model="searchData.appId"
              placeholder="应用AppId"
              style="width: 300px; margin-right: 10px;"
            />
            <el-form-item v-if="$access('ENT_PAY_ORDER_SEARCH_PAY_WAY')" label="" class="table-head-layout">
              <el-select v-model="searchData.wayCode" placeholder="支付方式" clearable>
                <el-option value="">全部</el-option>
                <el-option v-for="item in payWayList" :key="item.wayCode" :label="item.wayName" :value="item.wayCode"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" class="table-head-layout">
              <el-select v-model="searchData.state" placeholder="支付状态" clearable>
                <el-option value="">全部</el-option>
                <el-option value="0">订单生成</el-option>
                <el-option value="1">支付中</el-option>
                <el-option value="2">支付成功</el-option>
                <el-option value="3">支付失败</el-option>
                <el-option value="4">已撤销</el-option>
                <el-option value="5">已退款</el-option>
                <el-option value="6">订单关闭</el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" class="table-head-layout">
              <el-select v-model="searchData.notifyState" placeholder="回调状态" clearable>
                <el-option value="">全部</el-option>
                <el-option value="0">未发送</el-option>
                <el-option value="1">已发送</el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" class="table-head-layout">
              <el-select v-model="searchData.divisionState" placeholder="分账状态" clearable>
                <el-option value="">全部</el-option>
                <el-option value="0">未发生分账</el-option>
                <el-option value="1">等待分账任务处理</el-option>
                <el-option value="2">分账处理中</el-option>
                <el-option value="3">分账任务已结束（状态请看分账记录）</el-option>
              </el-select>
            </el-form-item>
            <span class="table-page-search-submitButtons">
              <el-button type="primary" @click="queryFunc" :loading="btnLoading">搜索</el-button>
              <el-button style="margin-left: 8px" @click="resetSearch">重置</el-button>
            </span>
          </div>
        </el-form>
      </div>

      <!-- 列表渲染 -->
      <JeepayTable
        @btnLoadClose="btnLoading=false"
        ref="infoTable"
        :initData="true"
        :reqTableDataFunc="reqTableDataFunc"
        :tableColumns="tableColumns"
        :searchData="searchData"
        rowKey="payOrderId"
        :tableRowCrossColor="true"
      >
        <template #amountSlot="{ record }"><b>￥{{ record.amount/100 }}</b></template>
        <template #refundAmountSlot="{ record }">￥{{ record.refundAmount/100 }}</template>
        <template #stateSlot="{ record }">
          <el-tag
            :type="record.state === 0 ? 'info' : record.state === 1 ? 'warning' : record.state === 2 ? 'success' : record.state === 6 ? '' : 'danger'"
          >
            {{ record.state === 0 ? '订单生成' : record.state === 1 ? '支付中' : record.state === 2 ? '支付成功' : record.state === 3 ? '支付失败' : record.state === 4 ? '已撤销' : record.state === 5 ? '已退款' : record.state === 6 ? '订单关闭' : '未知' }}
          </el-tag>
        </template>
        <template #divisionStateSlot="{ record }">
          <span v-if="record.divisionState == 0"> - </span>
          <el-tag type="warning" v-else-if="record.divisionState == 1">待分账</el-tag>
          <el-tag type="danger" v-else-if="record.divisionState == 2">分账处理中</el-tag>
          <el-tag type="success" v-else-if="record.divisionState == 3">任务已结束</el-tag>
          <span v-else>未知</span>
        </template>
        <template #notifySlot="{ record }">
          <el-tag :type="record.notifyState === 1 ? 'success' : 'danger'">
            {{ record.notifyState === 1 ? '已发送' : '未发送' }}
          </el-tag>
        </template>
        <template #orderSlot="{ record }">
          <div class="order-list">
            <p><span style="color:#729ED5;background:#e7f5f7">支付</span>{{ record.payOrderId }}</p>
            <p style="margin-bottom: 0">
              <span style="color:#56cf56;background:#d8eadf">商户</span>
              <el-tooltip placement="bottom" style="font-weight: normal;" v-if="record.mchOrderNo.length > record.payOrderId.length">
                <template #content>
                  <span>{{ record.mchOrderNo }}</span>
                </template>
                {{ changeStr2ellipsis(record.mchOrderNo, record.payOrderId.length) }}
              </el-tooltip>
              <span style="font-weight: normal;" v-else>{{ record.mchOrderNo }}</span>
            </p>
            <p v-if="record.channelOrderNo" style="margin-bottom: 0;margin-top: 10px">
              <span style="color:#fff;background:#E09C4D;">渠道</span>
              <el-tooltip placement="bottom" style="font-weight: normal;" v-if="record.channelOrderNo.length > record.payOrderId.length">
                <template #content>
                  <span>{{ record.channelOrderNo }}</span>
                </template>
                {{ changeStr2ellipsis(record.channelOrderNo, record.payOrderId.length) }}
              </el-tooltip>
              <span style="font-weight: normal;" v-else>{{ record.channelOrderNo }}</span>
            </p>
          </div>
        </template>
        <template #opSlot="{ record }">
          <JeepayTableColumns>
            <el-button type="text" v-if="$access('ENT_PAY_ORDER_VIEW')" @click="detailFunc(record.payOrderId)">详情</el-button>
            <el-button type="text" style="color: red" v-if="$access('ENT_PAY_ORDER_REFUND')" v-show="(record.state === 2 && record.refundState !== 2)" @click="openFunc(record, record.payOrderId)">退款</el-button>
          </JeepayTableColumns>
        </template>
      </JeepayTable>
    </el-card>
    <!-- 退款弹出框 -->
    <refund-modal ref="refundModalInfo" :callbackFunc="searchFunc"></refund-modal>
    <!-- 日志详情抽屉 -->
    <el-drawer
      width="50%"
      placement="right"
      :closable="true"
      :visible.sync="visible"
      :title="visible === true ? '订单详情' : ''"
      @close="onClose"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-descriptions>
            <el-descriptions-item label="所属系统">
              {{ detailData.mchType === 1 ? '普通商户' : detailData.mchType === 2 ? '特约商户' : '未知' }}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="12">
          <el-descriptions>
            <el-descriptions-item label="服务商号">
              {{ detailData.isvNo }}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="12">
          <el-descriptions>
            <el-descriptions-item label="支付订单号">
              <el-tag color="purple">
                {{ detailData.payOrderId }}
              </el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="12">
          <el-descriptions>
            <el-descriptions-item label="商户号">
              {{ detailData.mchNo }}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="12">
          <el-descriptions>
            <el-descriptions-item label="商户订单号">
              {{ detailData.mchOrderNo }}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="12">
          <el-descriptions>
            <el-descriptions-item label="商户名称">
              {{ detailData.mchName }}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="12">
          <el-descriptions>
            <el-descriptions-item label="支付金额">
              <el-tag color="green">
                {{ detailData.amount/100 }}
              </el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="12">
          <el-descriptions><el-descriptions-item label="手续费"><el-tag color="pink">{{ detailData.mchFeeAmount/100 }}</el-tag></el-descriptions-item></el-descriptions>
        </el-col>
        <el-col :span="12">
          <el-descriptions><el-descriptions-item label="商家费率">{{ (detailData.mchFeeRate*100).toFixed(2) }}%</el-descriptions-item></el-descriptions>
        </el-col>
        <el-col :span="12">
          <el-descriptions>
            <el-descriptions-item label="订单状态">
              <el-tag :color="detailData.state === 0?'blue':detailData.state === 1?'orange':detailData.state === 2?'green':detailData.state === 6?'':'volcano'">
                {{ detailData.state === 0?'订单生成':detailData.state === 1?'支付中':detailData.state === 2?'支付成功':detailData.state === 3?'支付失败':detailData.state === 4?'已撤销':detailData.state === 5?'已退款':detailData.state === 6?'订单关闭':'未知' }}
              </el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="12">
          <el-descriptions>
            <el-descriptions-item label="回调状态">
              <el-tag :color="detailData.notifyState === 1?'green':'volcano'">
                {{ detailData.notifyState === 0?'未发送':detailData.notifyState === 1?'已发送':'未知' }}
              </el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="12">
          <el-descriptions>
            <el-descriptions-item label="应用APPID">
              {{ detailData.appId }}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="12">
          <el-descriptions>
            <el-descriptions-item label="支付错误码">
              {{ detailData.errCode }}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="12">
          <el-descriptions>
            <el-descriptions-item label="支付错误描述">
              {{ detailData.errMsg }}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="12">
          <el-descriptions>
            <el-descriptions-item label="订单失效时间">
              {{ detailData.expiredTime }}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="12">
          <el-descriptions>
            <el-descriptions-item label="支付成功时间">
              {{ detailData.successTime }}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="12">
          <el-descriptions>
            <el-descriptions-item label="创建时间">
              {{ detailData.createdAt }}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="12">
          <el-descriptions>
            <el-descriptions-item label="更新时间">
              {{ detailData.updatedAt }}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-divider />
        <el-col :span="12">
          <el-descriptions>
            <el-descriptions-item label="商品标题">
              {{ detailData.subject }}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="12">
          <el-descriptions>
            <el-descriptions-item label="商品描述">
              {{ detailData.body }}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="12">
          <el-descriptions>
            <el-descriptions-item label="接口代码">
              {{ detailData.ifCode }}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="12">
          <el-descriptions>
            <el-descriptions-item label="货币代码">
              {{ detailData.currency }}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="12">
          <el-descriptions>
            <el-descriptions-item label="支付方式">
              {{ detailData.wayCode }}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="12">
          <el-descriptions>
            <el-descriptions-item label="客户端IP">
              {{ detailData.clientIp }}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="12">
          <el-descriptions>
            <el-descriptions-item label="用户标识">
              {{ detailData.channelUser }}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="12">
          <el-descriptions>
            <el-descriptions-item label="渠道订单号">
              {{ detailData.channelOrderNo }}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="12">
          <el-descriptions>
            <el-descriptions-item label="异步通知地址">
              {{ detailData.notifyUrl }}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="12">
          <el-descriptions>
            <el-descriptions-item label="页面跳转地址">
              {{ detailData.returnUrl }}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="12">
          <el-descriptions>
            <el-descriptions-item label="退款状态">
              <el-tag :color="detailData.refundState === 0?'blue':detailData.refundState === 1?'orange':detailData.refundState === 2?'green':'volcano'">
                {{ detailData.refundState === 0?'未发起':detailData.refundState === 1?'部分退款':detailData.refundState === 2?'全额退款':'未知' }}
              </el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="12">
          <el-descriptions>
            <el-descriptions-item label="退款次数">
              {{ detailData.refundTimes }}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="12">
          <el-descriptions>
            <el-descriptions-item label="退款总额">
              <el-tag color="cyan" v-if="detailData.refundAmount">
                {{ detailData.refundAmount/100 }}
              </el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-divider />
        <el-col :span="12">
          <el-descriptions><el-descriptions-item label="订单分账模式">
              <span v-if="detailData.divisionMode == 0">该笔订单不允许分账</span>
              <span v-else-if="detailData.divisionMode == 1">支付成功按配置自动完成分账</span>
              <span v-else-if="detailData.divisionMode == 2">商户手动分账(解冻商户金额)</span>
              <span v-else>未知</span>
            </el-descriptions-item></el-descriptions>
          </el-col>
          <el-col :span="12">
            <el-descriptions><el-descriptions-item label="分账状态">
              <el-tag color="blue" v-if="detailData.divisionState == 0">未发生分账</el-tag>
              <el-tag color="orange" v-else-if="detailData.divisionState == 1">待分账</el-tag>
              <el-tag color="red" v-else-if="detailData.divisionState == 2">分账处理中</el-tag>
              <el-tag color="green" v-else-if="detailData.divisionState == 3">任务已结束</el-tag>
              <el-tag color="#f50" v-else>未知</el-tag>
            </el-descriptions-item></el-descriptions>
          </el-col>
          <el-col :span="12">
            <el-descriptions><el-descriptions-item label="最新分账发起时间">{{ detailData.divisionLastTime }}</el-descriptions-item></el-descriptions>
          </el-col>
        </el-row>
        <el-divider />
        <el-row justify="start" type="flex">
          <el-col :sm="24">
            <el-form-item label="扩展参数">
              <el-input
                type="textarea"
                disabled="disabled"
                style="height: 100px;color: black"
                v-model="detailData.extParam"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-drawer>
  </page-header-wrapper>
</template>

<script>
import RefundModal from './RefundModal'
import { API_URL_PAY_ORDER_LIST, API_URL_PAYWAYS_LIST, req } from '@/api/pay/order/payOrder'
import moment from 'moment'

export default {
  name: 'IsvListPage',
  components: { JeepayTable, JeepayTableColumns, RefundModal },
  data() {
    return {
      btnLoading: false,
      tableColumns: [
        { key: 'amount', title: '支付金额', ellipsis: true, width: 108, fixed: 'left', scopedSlots: { customRender: 'amountSlot' } },
        { key: 'refundAmount', title: '退款金额', width: 108, scopedSlots: { customRender: 'refundAmountSlot' } },
        { key: 'mchFeeAmount', dataIndex: 'mchFeeAmount', title: '手续费', customRender: (text) => '￥' + (text / 100).toFixed(2), width: 100 },
        { key: 'mchName', title: '商户名称', dataIndex: 'mchName', ellipsis: true, width: 100 },
        { key: 'orderNo', title: '订单号', scopedSlots: { customRender: 'orderSlot' }, width: 210 },
        { key: 'wayName', title: '支付方式', dataIndex: 'wayName', width: 120 },
        { key: 'state', title: '支付状态', scopedSlots: { customRender: 'stateSlot' }, width: 100 },
        { key: 'notifyState', title: '回调状态', scopedSlots: { customRender: 'notifySlot' }, width: 100 },
        { key: 'divisionState', title: '分账状态', scopedSlots: { customRender: 'divisionStateSlot' }, width: 100 },
        { key: 'createdAt', dataIndex: 'createdAt', title: '创建日期', width: 120 },
        { key: 'op', title: '操作', width: 120, fixed: 'right', align: 'center', scopedSlots: { customRender: 'opSlot' } }
      ],
      searchData: {
        timeRange: []
      },
      visible: false,
      detailData: {},
      payWayList: []
    }
  },
  methods: {
    queryFunc() {
      this.btnLoading = true
      this.$refs.infoTable.refTable(true)
    },
    reqTableDataFunc(params) {
      const { timeRange, ...rest } = this.searchData
      const [createdStart, createdEnd] = timeRange || []
      return req.list(API_URL_PAY_ORDER_LIST, { ...rest, createdStart, createdEnd, ...params })
    },
    searchFunc() {
      this.$refs.infoTable.refTable(false)
    },
    openFunc(record, recordId) {
      if (record.refundState === 2) {
        return this.$infoBox.modalError('订单无可退款金额', '')
      }
      this.$refs.refundModalInfo.show(recordId)
    },
    detailFunc(recordId) {
      req.getById(API_URL_PAY_ORDER_LIST, recordId).then(res => {
        this.detailData = res
      })
      this.visible = true
    },
    resetSearch() {
      this.searchData = { timeRange: [] }
    },
    disabledDate(current) {
      return current && current > moment().endOf('day')
    },
    onClose() {
      this.visible = false
    },
    initPayWay() {
      req.list(API_URL_PAYWAYS_LIST, { pageSize: -1 }).then(res => {
        this.payWayList = res.records
      })
    },
    changeStr2ellipsis(orderNo, baseLength) {
      const halfLength = parseInt(baseLength / 2)
      return orderNo.substring(0, halfLength - 1) + '...' + orderNo.substring(orderNo.length - halfLength, orderNo.length)
    }
  },
  mounted() {
    if (this.$access('ENT_PAY_ORDER_SEARCH_PAY_WAY')) {
      this.initPayWay()
    }
  }
}
</script>

<style lang="less" scoped>
.order-list {
  -webkit-text-size-adjust: none;
  font-size: 12px;
  display: flex;
  flex-direction: column;

  p {
    white-space: nowrap;
    span {
      display: inline-block;
      font-weight: 800;
      height: 16px;
      line-height: 16px;
      width: 35px;
      border-radius: 5px;
      text-align: center;
      margin-right: 2px;
    }
  }
}
</style>
